import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import ticketActive from "@/assets/images/order/ticketSelect.png"
import {useSelector, useDispatch} from "react-redux";
import {RootState} from "@/store";
import { parseFloat } from '@/utils/index'
import { selectTicketDetail } from "@/store/slices/activityDetailSlice"
import { parseISO, isBefore } from 'date-fns';


export default function selectTicketScreen() {

    const router = useRouter();
    const [active, setActive] = useState(0);
    const dispatch = useDispatch();

    const activity = useSelector((state: RootState) => state.activityDetail);


    useEffect(() => {
        console.log('activity', activity);
    }, []);

    const goBuildOrder = () => {
        console.log('activity', activity.activityDetail.tickets)
        dispatch(selectTicketDetail({ ticketDetail: activity.activityDetail.tickets[active]  }))
        router.push("/order/buildOrder")
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '选择票种', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
           <View style={styles.selectTicketContainer}>
               <View style={styles.activityTitleWrap}>
                   <Text style={styles.activityTitleWrapText}>
                       { activity?.activityDetail?.title }
                   </Text>
               </View>
               <View>
                   {
                       activity?.activityDetail.tickets?.map((item, index) => {
                          {
                               return (
                                   <TouchableOpacity onPress={() => setActive(index)} key={index}>
                                       <View style={[styles.ticketItem, { borderColor: index == active ? "#EC6138" : "#E4E6EC" }]}>
                                           <View style={!item.desc && { flexDirection: "row", justifyContent: "center" }} >
                                               <View>
                                                   <Text>{ item.ticketName  }</Text>
                                               </View>
                                               {
                                                   item?.description && (
                                                       <View>
                                                           <Text style={styles.ticketTitleDes}>{ item?.description }</Text>
                                                       </View>
                                                   )
                                               }
                                           </View>
                                           <View style={styles.ticketItemMoneyWarp}>
                                               <Text style={{ color: "#EC6138", lineHeight: 28 }}>¥</Text><Text style={{ color: "#EC6138", fontSize: 20 }}>{ parseFloat(item.price) }</Text>
                                           </View>
                                           {
                                               active === index && (
                                                   <View style={styles.activeIcon}>
                                                       <Image source={ticketActive} style={{ width:"100%", height: "100%" }} />
                                                   </View>
                                               )
                                           }
                                       </View>
                                   </TouchableOpacity>
                               )
                           };

                       })
                   }
               </View>
               <View style={styles.tips}>
                   <Text style={styles.tipsText}>注意：每笔订单限购一次</Text>
               </View>
           </View>
           <View style={styles.submitOrderWarp}>
                <View style={{ flexDirection: "row"}}>
                    <Text style={{ color: "#FB4B34", lineHeight: 28 }}></Text><Text style={styles.subMoney}> { activity?.activityDetail?.tickets.length > 0 && ("¥" + parseFloat(activity?.activityDetail?.tickets[active].price) ) }</Text>
                </View>
               {
                   activity?.activityDetail?.tickets.length > 0 && (
                       <TouchableOpacity onPress={goBuildOrder}>
                           <View style={styles.submitOrderBtn}>
                               <Text style={styles.submitOrderBtnText}>确认支付</Text>
                           </View>
                       </TouchableOpacity>
                   )
               }

               {
                   activity?.activityDetail?.tickets.length <= 0 && (
                       <TouchableOpacity activeOpacity={1}>
                           <View style={styles.unsubmitOrderBtn}>
                               <Text style={styles.unsubmitOrderBtnText}>确认支付</Text>
                           </View>
                       </TouchableOpacity>
                   )
               }
           </View>
        </View>

    );
}

const styles = StyleSheet.create({
    selectTicketContainer: {
        paddingHorizontal: 12,
    },
    activityTitleWrap: {
        paddingVertical: 12,
    },
    activityTitleWrapText: {
        fontWeight: 400,
        color: "#2A2B30"
    },
    ticketItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingVertical: 16,
        paddingHorizontal: 14,
        backgroundColor: "#fff",
        borderRadius: 6,
        borderWidth: 0.5,
        borderColor: "#E4E6EC",
        marginBottom: 10
    },
    ticketItemMoneyWarp: {
        flexDirection: "row",
        // alignItems: "center"
    },
    ticketTitleDes: {
        fontSize: 12,
        marginTop: 2,
        color: "#9C9EAC"
    },
    flexCenters: {
        flexDirection: "row",
        justifyContent: "center"
    },
    activeIcon: {
        position: "absolute",
        bottom: 0,
        right: 0,
        width: 18,
        height: 18,
    },
    tips: {

    },
    tipsText: {
        color: "#9C9EAC",
        fontSize: 12,
    },
    submitOrderWarp: {
        position: "absolute",
        bottom: 0,
        paddingBottom: 29,
        paddingTop: 8,
        backgroundColor: "#fff",
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingHorizontal: 12,
    },
    subMoney: {
        fontSize: 20,
        color: "#FB4B34",
    },
    submitOrderBtn: {
        width: 110,
        height: 40,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EC6138",
        borderRadius: 20,
    },
    submitOrderBtnText: {
        color: "#fff"
    },
    unsubmitOrderBtn: {
        width: 110,
        height: 40,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#E4E6EC",
        borderRadius: 20,
    },
    unsubmitOrderBtnText: {
        color: "#fff"
    },
});
